<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <head th:include="common::head"></head>
    <title>菜单列表</title>
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="panel-group" id="panel-group-accordion">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <a data-toggle="collapse" data-parent="#panel-group-accordion"  href="#search-condition-body"
                        class="btn btn-primary btn-sm" role="button">
                            折叠/展开 筛选条件
                        </a>
                    </h3>
                </div>
                <div id="search-condition-body" class="panel-collapse collapse in">
                    <div class="panel-body">
                        <div class="row">
                            <form id="form" role="form">
                                <div class="form-group col-md-2">
                                    <label class="col-form-label">菜单名称：</label>
                                    <input type="text" class="form-control" id="username" name="menuName" placeholder="输入菜单名称...">
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!--<hr class="mt-2">-->
            <div class="panel">
                <div class="panel-heading">
                    菜单维护
                </div>
                <div class="panel-body">
                    <div class="fixed-table-toolbar">
                        <div class="bs-bars float-right">
                            <div id="toolbar">
                                <!--<button class="btn btn-primary" onclick="returnPrePage()">
                                    <i class="glyphicon glyphicon-arrow-left"></i>
                                    返回
                                </button>-->
                                <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">
                                    <i class="glyphicon glyphicon-plus"></i>
                                    新增
                                </button>
                                <button class="btn btn-primary btn-sm" onclick="reload()">
                                    <i class="glyphicon glyphicon-search"></i>
                                    查询
                                </button>
                                <button class="btn btn-primary btn-sm" onclick="exportExcel()">
                                    <i class="glyphicon glyphicon-download-alt"></i>
                                    导出
                                </button>
                                <button class="btn btn-danger btn-sm" onclick="deleteRow()">
                                    <i class="glyphicon glyphicon-remove"></i>
                                    删除
                                </button>
                            </div>
                        </div>
                    </div>
                    <table id="table" class="table"></table>
                </div>
            </div>
        </div>
        <!--模态框-->
        <div id="myModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
            <div class="modal-dialog modal-lg" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                        <h4 class="modal-title" id="myLargeModalLabel">新增菜单</h4>
                    </div>
                    <div class="modal-body">
                        <form id="menuAddForm">
                            <div class="form-group">
                                <label class="col-xs-12" for="menuName">菜单名称</label>
                                <div class="col-xs-12">
                                    <input class="form-control" type="text" id="menuName" name="menuName" placeholder="菜单名称..">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-xs-12" for="menuUrl">菜单URL</label>
                                <div class="col-xs-12">
                                    <input class="form-control" type="text" id="menuUrl" name="menuUrl" placeholder="菜单URL..">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-xs-12" for="menuUrl">菜单级别</label>
                                <div class="col-xs-12">
                                    <input class="form-control" type="text" id="menuLevel" name="menuLevel" placeholder="菜单级别..">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-xs-12" for="menuUrl">父级菜单</label>
                                <div class="col-xs-12">
                                    <select class="form-control" id="parentId" name="parentId" size="1">
                                        <option value="">无</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-xs-12" for="menuUrl">排序</label>
                                <div class="col-xs-12">
                                    <input class="form-control" type="text" id="menuSort" name="menuSort" placeholder="排序..">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-xs-12" for="menuUrl">菜单类型</label>
                                <div class="col-xs-12">
                                    <input class="form-control" type="text" id="menuType" name="menuType" placeholder="菜单类型..">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-xs-12" for="menuUrl">菜单图标</label>
                                <div class="col-xs-12">
                                    <input class="form-control" type="text" id="menuIcon" name="menuIcon" placeholder="菜单图标..">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-xs-12" for="menuUrl">备注</label>
                                <div class="col-xs-12">
                                    <input class="form-control" type="text" id="remark" name="remark" placeholder="备注..">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer" style="margin-top: 10px">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" onclick="saveMenuAddInfo()">点击保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:replace="common::js-basic"></div>
<div th:replace="common::js-table"></div>

<script th:inline="javascript">

    var $table = $("#table");

    $table.bootstrapTable({
        //toggle: 'table',
        toolbar: '#toolbar',
        url: '/menu/get/original',
        toolbarAlign: 'right',
        trimOnSearch: 'true',
        sidePagination: 'server',
        queryParams: 'queryParams',
        idField: 'id',
        pagination: true,
        rowStyle: 'rowStyle',
        uniqueId:'id',
        /*sortable: true, // 是否启用排序
        pageNumber:1,                  //初始化加载第一页，默认第一页
        pageSize: 10,                 //每页的记录行数（*）
        pageList: [10, 25, 50, 100],  //可供选择的每页的行数（*）
        cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination: true,                   //是否显示分页（*）
        sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）*/
        //showExport: true, //是否显示导出
        //exportDataType: "selected", //basic', 'all', 'selected'
        //showRefresh: true, //是否显示刷新按钮
        responseHandler: function(res){
            //var rowsData = res.rows;
            return {
                total: res.data.total,//总条数
                rows: res.data.rows //数据
            };
        },
        columns: [
            {
                checkbox: true
            }, {
                title: '序号',
                formatter: function (value, row, index) {
                    var pageSize = $table.bootstrapTable('getOptions').pageSize;
                    var pageNumber = $table.bootstrapTable('getOptions').pageNumber;
                    return pageSize * (pageNumber - 1) + index + 1;
                }
            }, {
                field: 'id',
                title: '编号',
                visible: false
            }, {
                field: 'menuName',
                title: '菜单名称',
                editable:{
                    type: 'text',
                    title: '请输入..',
                    emptytext: "",
                    validate: function(v) {
                        if (!v) return '菜单名称不可为空';
                    }
                }
            }, {
                field: 'menuUrl',
                title: '菜单URL',
                editable:{
                    type: 'text',
                    title: '请输入..',
                    emptytext: "",
                    validate: function(v) {
                        if (!v) return '菜单URL不可为空';
                    }
                }
            }, {
                field: 'menuLevel',
                title: '菜单级别',
                editable:{
                    type: 'text',
                    title: '请输入..',
                    emptytext: "",
                    validate: function(v) {
                        if (!v) return '菜单级别不可为空';
                    }
                }
            }, {
                field: 'menuType',
                title: '菜单类型'
            }, {
                field: 'menuSort',
                title: '排序',
                editable:{
                    type: 'text',
                    title: '请输入..',
                    emptytext: "null",
                    validate: function(v) {
                        if (!v) return '菜单排序不可为空';
                    }
                }
            },{
                field: 'menuIcon',
                title: '菜单图标',
                editable:{
                    type: 'text',
                    title: '请输入..',
                    emptytext: "null"
                }
            },{
                field: 'remark',
                title: '备注',
                editable:{
                    type: 'text',
                    title: '请输入..',
                    emptytext: "null"
                }
            }, {
                field: 'gmtCreate',
                title: '创建时间'
            },
            {
                field: 'gmtUpdate',
                title: '更新时间'
            }],
        onEditableSave: function (field, row, oldValue, $el) {
            $.ajax({
                type: "post",
                url: "/menu/edit",
                data: row,//参数为整个一行
                dataType: 'JSON',
                success: function (data) {
                    alert(data.message);
                },
                error: function (err) {
                    console.log(err)
                },
                complete: function () {
                }

            });
        }
    });

    function queryParams(params) {
        //params['sort'] = encodeURI('apply_datetime desc');
        //params['order'] = 'desc';
        $('#form').find('input[name]').each(function () {
            params[$(this).attr('name')] = $(this).val();
        });
        $('#form').find('select[name]').each(function () {
            params[$(this).attr('name')] = $(this).val();
        });
        return params;
    }

    /*删除数据*/
    function deleteRow() {
        var ids = getIdSelections();//数组
        var arrData={"ids":ids+""};//加了""可以转为字符串 去掉数组的[]括号
        var jsonData = JSON.stringify(arrData);
        $.ajax({
            url:'/menu/delete',
            type:'POST',
            contentType: "application/json;charset=UTF-8",
            data:jsonData,
            dataType:'json',
            success:function (res) {
                if (res.data==true){
                    alert(res.message);
                    reload();
                } else{
                    alert("失败:"+res.message);
                }
            },
            error:function () {
                alert('查询出错！');
            }
        });
    }

    function getIdSelections() {
        return $.map($("#table").bootstrapTable('getSelections'), function (row) {
            return row.id
        });
    }

    function reload() {
        $table.bootstrapTable('refresh');
    }

    /******************************************模态框******************************************************************/
    //模态框展开事件
    $('#myModal').on('show.bs.modal',
        function() {
            $.ajax({
                type : "GET",
                contentType: "application/json;charset=UTF-8",
                url : "/menu/get/original",
                dataType:"json",
                success : function(results) {
                    //给父级菜单输入框赋值
                    var result = results.data.rows;
                    var options = '';
                    for (let i=0;i<result.length;i++){
                        options += '<option value="'+result[i].id+'">'+result[i].menuName+'</option>';
                    }
                    $('#parentId').append(options);
                },
                error : function(e){
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        });

    /*添加菜单*/
    function saveMenuAddInfo(){
        var jsonData = getFormValue("#menuAddForm");
        $.ajax({
            url:'/menu/add',
            type:'POST',
            contentType: "application/json;charset=UTF-8",
            data:jsonData,
            dataType:'json',
            success:function (res) {
                if (res.data==true){
                    alert(res.message);
                } else{
                    alert("失败"+res.message);
                }
            },
            error:function (e) {
                console.log(e.status);
                console.log(e.responseText);
            }
        });

    }

    //获取表单数据通用方法
    function getFormValue(formId) {
        var formObj = {};
        var t = $(formId).serializeArray();
        $.each(t, function() {
            formObj[this.name] = this.value;
        });
        console.log(JSON.stringify(formObj));
        return JSON.stringify(formObj);
    }

    function exportExcel() {
        window.location.href = "/student/export?"+$('#form').serialize();
    }
</script>
</body>
</html>